React Native এ Styles এবং CSS এর মধ্যে পার্থক্য

React Native এবং CSS উভয়ই স্টাইলিংয়ের জন্য ব্যবহৃত হয়, তবে তাদের মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে। React Native এ স্টাইলিং JavaScript Object-ভিত্তিক, যেখানে CSS একটি স্টাইলশীট ভাষা যা HTML এর সাথে সম্পর্কিত। নিচে React Native এর স্টাইলিং এবং CSS এর মধ্যে পার্থক্যগুলো বিস্তারিতভাবে তুলে ধরা হয়েছে:

১. স্টাইলিং পদ্ধতি

• React Native: React Native এ স্টাইলিং JavaScript Object এর মাধ্যমে করা হয়। এখানে আপনি প্রপার্টি হিসেবে ক্যামেলকেস ব্যবহার করেন, যেমন backgroundColor, fontSize ইত্যাদি।

  উদাহরণ:

  const styles = {
    container: {
      backgroundColor: 'blue',
      padding: 10,
    },
    text: {
      color: 'white',
      fontSize: 20,
    }
  };

• CSS: CSS-এ স্টাইলগুলি এটি আলাদা স্টাইলশীটে লেখা হয় এবং সেখানে প্রপার্টি গুলি কীওয়ার্ড স্টাইল ব্যবহার করে লেখা হয়, যেমন background-color, font-size ইত্যাদি।

  উদাহরণ:

  .container {
    background-color: blue;
    padding: 10px;
  }
  .text {
    color: white;
    font-size: 20px;
  }

২. স্টাইলশীট ব্যবস্থাপনা

• React Native: React Native এ, স্টাইলগুলো JavaScript Object হিসেবে ঘোষণা করা হয় এবং StyleSheet.create() ফাংশন ব্যবহার করে সংকলিত করা হয়, যাতে কোডের পারফরম্যান্স উন্নত হয়।

  উদাহরণ:

  import { StyleSheet } from 'react-native';
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'blue',
      padding: 10,
    },
    text: {
      color: 'white',
      fontSize: 20,
    }
  });

• CSS: CSS সাধারণত একটি পৃথক ফাইলের মধ্যে লেখা থাকে (যেমন style.css), এবং HTML বা JSX ফাইলে link বা import ট্যাগের মাধ্যমে সংযুক্ত করা হয়।

৩. ক্লাসনেম এবং ক্যামেলকেস

• React Native: React Native এ, স্টাইল প্রপার্টি গুলি ক্যামেলকেস ফরম্যাটে লেখা হয়, যেমন backgroundColor, fontSize, textAlign ইত্যাদি।

  উদাহরণ:

  const styles = {
    button: {
      backgroundColor: 'blue',
      fontSize: 16,
      padding: 10,
    }
  };

• CSS: CSS-এ, প্রপার্টি গুলি হাইফেন সেপারেটেড হয়, যেমন background-color, font-size, text-align ইত্যাদি।

  উদাহরণ:

  .button {
    background-color: blue;
    font-size: 16px;
    padding: 10px;
  }

৪. ডিভাইসের জন্য পারফরম্যান্স অপ্টিমাইজেশন

• React Native: React Native স্টাইলিং JavaScript-এ ভিত্তি করে, তাই এতে স্টাইলিং আপডেটের জন্য re-render হতে পারে, তবে React Native এর StyleSheet.create() মেথড এই আপডেটগুলিকে অপ্টিমাইজ করে।
• CSS: CSS স্টাইলের পরিবর্তন ব্রাউজারের DOM (Document Object Model) এর মধ্যে ঘটে, তবে এটি JavaScript এর মাধ্যমে পারফরম্যান্স কমাতে পারে যখন সঠিকভাবে কেসগুলো ব্যবস্থাপনা না করা হয়।

৫. মিডিয়া কুয়েরি (Media Queries)

• React Native: React Native তে মিডিয়া কুয়েরি সমর্থন সরাসরি নেই। তবে, আপনি Dimensions API ব্যবহার করে ডিভাইসের স্ক্রীন সাইজ অনুযায়ী স্টাইল পরিবর্তন করতে পারেন।

  উদাহরণ:

  import { Dimensions } from 'react-native';
  
  const { width, height } = Dimensions.get('window');
  const styles = StyleSheet.create({
    container: {
      width: width < 600 ? 300 : 500, // স্ক্রীন সাইজ অনুসারে পরিবর্তন
    }
  });

• CSS: CSS তে মিডিয়া কুয়েরি ব্যবহার করে স্ক্রীন সাইজ বা ডিভাইসের প্রস্থ/উচ্চতার উপর ভিত্তি করে স্টাইলিং করা যায়।

  উদাহরণ:

  @media (max-width: 600px) {
    .container {
      width: 300px;
    }
  }

৬. স্টাইলিং ইউনিট

• React Native: React Native এ, বেশিরভাগ স্টাইল প্রপার্টির জন্য পিক্সেল ব্যবহার হয়, যেমন padding: 10, fontSize: 20 ইত্যাদি। কোনো সুনির্দিষ্ট ইউনিট যেমন px বা em ব্যবহৃত হয় না।

  উদাহরণ:

  const styles = {
    container: {
      padding: 10, // এখানে পিক্সেলই ব্যবহার হচ্ছে
      fontSize: 18, // পিক্সেল ভিত্তিক
    }
  };

• CSS: CSS-এ আপনি পিক্সেল (px), এম (em), প্রতি শতাংশ (%), রেম (rem) এবং অন্যান্য ইউনিট ব্যবহার করতে পারেন।

  উদাহরণ:

  .container {
    padding: 10px;
    font-size: 1rem;
  }

৭. পজিশনিং এবং ফ্লেক্সবক্স

• React Native: React Native তে, Flexbox ব্যবহৃত হয় এবং এটি স্বাভাবিকভাবে row, column মতো ডিরেকশন সরবরাহ করে। position, absolute, relative ইত্যাদি স্টাইল প্রপার্টি React Native এ একভাবে কাজ করে।

  উদাহরণ:

  const styles = {
    container: {
      flexDirection: 'row', // React Native এ Flexbox ব্যবহৃত
      justifyContent: 'center',
    }
  };

• CSS: CSS তেও Flexbox ব্যবহৃত হয় এবং বিভিন্ন উপাদানের জন্য display: flex, flex-direction, justify-content ইত্যাদি প্রপার্টি ব্যবহার করা হয়।

  উদাহরণ:

  .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

সারাংশ

• React Native তে স্টাইলিং JavaScript Object এর মাধ্যমে করা হয়, যেখানে প্রপার্টি গুলি ক্যামেলকেস ফরম্যাটে থাকে, এবং CSS এর মতো আলাদা স্টাইলশীট ফাইল থাকে না।
• CSS তে স্টাইলশীট ব্যবহার করা হয় এবং স্টাইল প্রপার্টিগুলি হাইফেন সেপারেটেড থাকে, যেমন background-color এবং font-size।

React Native-এ স্টাইলিং JavaScript-এর অংশ হিসেবে ব্যবহৃত হয় এবং মোবাইল অ্যাপ্লিকেশনের জন্য পারফরম্যান্স অপ্টিমাইজেশন সহ কাজ করে, যেখানে CSS ওয়েব পেজের জন্য ব্রাউজারের মাধ্যমে স্টাইলিং ব্যবস্থা করে।